import React, { PureComponent } from 'react';

import { connect } from 'dva';
import Search from '../../components/Search';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { downloadFile, goToRouter } from '@/utils/utils';
import CopyToClipboard from '@/components/CopyToClipboard';
import status from '@/config/status.config';
import { withShopStatus } from '@/utils/enum';

import { Table, Card, message, Button, Drawer, Form, Select, Spin, Divider } from 'antd';
import SplitBillService from './services/splitBill';
import moment from 'moment';

@connect()
@Form.create()
class NormalSplitBill extends PureComponent {
  state = {
    tableData: [],
    loading: true,
    arrStatus: ['0/正在审核', '1/审核不通过', '2/审核通过'],
    current: 1,
    pageNumber: 1,
    pageSize: 10,
    type: null,
    shopId: null,
    shopName: null,
    status: null,
    visible: false,
    spinning: false,
    filter: {}
  };

  columns = [
    {
      title: '订单编号',
      dataIndex: 'orderId',
      width: 140,
      render: text => <CopyToClipboard text={text} />,
    },
    /* { title: '店铺名称', dataIndex: 'shopName', key: 'shopName', width: 120 }, */

    {
      title: '总金额',
      dataIndex: 'userPayAmount',
      width: 80,
      render: text => (text < 0 ? 0 : text),
    },
    // { title: '状态', dataIndex: 'orderStatus', width: 80, render: text => detailsStatus[text] },
    { title: '支付时间', dataIndex: 'userPayTime' },
    // { title: '账单到期时间', dataIndex: 'statementDate', render: text => (text < 0 ? 0 : text) },
    { title: '商家结算金额', dataIndex: 'toShopAmount', render: text => (text < 0 ? 0 : text) },
    { title: '平台佣金', dataIndex: 'toOpeAmount', render: text => (text < 0 ? 0 : text) },
    { title: '与商家结算状态', dataIndex: 'status', render: text => withShopStatus[text] },
    { title: '结算人', dataIndex: 'name' },
    { title: '结算时间', dataIndex: 'splitBillTime', key: 'splitBillTime' },
    {
      title: '操作',
      align: 'center',
      key: 'action',
      fixed: 'right',
      render: (text, record) => {
        return (
          <div className="table-action">
            <a onClick={() => this.preview(record.id)}>查看</a>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.initData();
  }

  initData = () => {
    let payload = {
      pageNumber: this.state.pageNumber,
      pageSize: this.state.pageSize,
      ...this.state.filter,
    };
    this.setState(
      {
        loading: true,
      },
      () => {
        SplitBillService.purchasePage(payload).then(res => {
          message.success('获取信息成功');
          this.setState({
            tableData: res.records,
            total: res.total,
            loading: false,
            current: res.current,
          });
        });
      },
    );
  };

  handleFilter = (data = {}) => {
    if (data.queryType && data.queryType === '分页') {
      this.initData();
    } else {
      this.setState(
        {
          pageNumber: 1,
          pageSize: 10,
          filter: data
        },
        () => {
          this.initData();
        },
      );
    }
  };

  handleExportData = (filter = {}) => {
    if (filter.createDate && filter.createDate.length > 1) {
      filter.createTimeStart = moment(filter.createDate[0]).format('YYYY-MM-DD HH:mm:ss');
      filter.createTimeEnd = moment(filter.createDate[1]).format('YYYY-MM-DD HH:mm:ss');
    }
    SplitBillService.purchaseExport(filter).then(res => {
      // downloadFile(res)
      location.href = res;
    });
  };

  //分页，下一页
  onChange = pageNumber => {
    this.setState(
      {
        pageNumber: pageNumber,
      },
      () => {
        this.handleFilter({ queryType: '分页' });
      },
    );
  };

  showTotal = () => {
    return `共有${this.state.total}条`;
  };

  //切换每页数量
  onShowSizeChange = (current, pageSize) => {
    this.setState({ pageSize: pageSize }, () => {
      this.handleFilter({ queryType: '分页' });
    });
  };

  preview = id => {
    this.setState(
      {
        visible: true,
        spinning: true,
      },
      () => {
        goToRouter(this.props.dispatch, '/finance/purchase/purchaseDetail/' + id);
      },
    );
  };

  render() {
    const { loading, current, total, arrStatus, visible, spinning, tableData } = this.state;

    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Search
            needExport
            arrStatus={arrStatus}
            source={'购买订单'}
            exportData={this.handleExportData}
            handleFilter={this.handleFilter}
          />
        </Card>
        <Card bordered={false} style={{ marginTop: 20 }}>
          <Table
            scroll={{ x: true }}
            columns={this.columns}
            loading={loading}
            dataSource={tableData}
            rowKey={record => record.id}
            pagination={{
              current: current,
              total: total,
              onChange: this.onChange,
              showTotal: this.showTotal,
              showQuickJumper: true,
              pageSizeOptions: ['5', '10', '20'],
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange,
            }}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default NormalSplitBill;
